<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor WebAssembly Boilerplate</title>
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <!-- This file is only needed (and apparently also only generated) if there are any Page or Component specific styles used. -->
    <!--<link href="FSH.BlazorWebAssembly.Client.styles.css" rel="stylesheet" />-->
    <link href="css/fsh.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="full-stack-hero-logo.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="full-stack-hero-logo.png" />
</head>

<body>
    <div id="app">
        <style>
            @keyframes slide {
                0% {
                    transform: translateX(-25%);
                }

                100% {
                    transform: translateX(25%);
                }
            }

            .fsh-wasm {
                animation: slide 3s ease-in-out infinite alternate;
                bottom: 0;
                left: -50%;
                opacity: .5;
                position: fixed;
                right: -50%;
                top: 0;
                z-index: -1
            }

            .fsh-wasm-cont {
                left: 50%;
                padding: 10vmin;
                position: fixed;
                text-align: center;
                top: 50%;
                transform: translate(-50%, -50%)
            }
        </style>

        <div style="height:100%;width:100%;margin:0;position:fixed;">
            <div class="fsh-wasm"></div>
            <div class="fsh-wasm" style="animation-direction:alternate-reverse;animation-duration:2s;"></div>
            <div class="fsh-wasm" style="animation-duration:5s;"></div>
            <div class="fsh-wasm-cont ">
                <img src="/full-stack-hero-logo.png" Style="height:350px; width:350px; opacity:0.8" />
            </div>
        </div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>

    <script>
        var themeManager = JSON.parse(window.localStorage.getItem("clientPreference"));
        var primaryColor = '#3eaf7c';
        var baseColor = '#ffffff';
        if (themeManager) {
            if (themeManager.PrimaryColor) {
                primaryColor = themeManager.PrimaryColor;
            }
            if (themeManager.IsDarkMode) {
                baseColor = '#1b1f22';
            }
        }
        var elements = document.getElementsByClassName('fsh-wasm');
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundImage = 'linear-gradient(-120deg,' + primaryColor + ' 50%,' + baseColor + ' 50%)';
        }

        async function downloadFileFromStream(fileName, contentStreamReference) {
            const arrayBuffer = await contentStreamReference.arrayBuffer();
            const blob = new Blob([arrayBuffer]);
            const url = URL.createObjectURL(blob);

            triggerFileDownload(fileName, url);

            URL.revokeObjectURL(url);
        }

        function triggerFileDownload(fileName, url) {
            const anchorElement = document.createElement('a');
            anchorElement.href = url;
            anchorElement.download = fileName ?? '';
            anchorElement.click();
            anchorElement.remove();
        }
    </script>
</body>

</html>